<template>

<!--    大学-->
  <div style="width: 100%;display: flex;justify-content: center">
    <div style="height: 500px;background: white;width: 70%;display: flex;justify-content: center" v-if="!visible">
      <h2>对方已隐藏个人信息</h2>
    </div>
    <div v-else="visible" style="width: 100%;display: flex;justify-content: center">
      <div class="big" v-if="uType=='university'">
        <div  class="base">
          <el-divider style="width: 95%;" content-position="left">
            <h3>基本信息</h3>
          </el-divider>
        </div>
        <div class="baseMsg">
          <div class="options">
            <p>登录名</p>
            <p>学校层次</p>
            <p>学校性质</p>
            <p>法人</p>
            <p>所在地</p>
            <p>注册时间</p>
          </div>
          <div class="msg">
            <p>{{university.universityName}}</p>
            <p>{{university.level}}</p>
            <p>{{university.nature}}</p>
            <p>{{university.legalPerson}}</p>
            <p>{{university.address}}</p>
            <p>{{university.registerTime|formatDate}}</p>
          </div>
        </div>
        <div class="contact">
          <el-divider style="width: 95%;" content-position="left">
            <h3>联系信息</h3>
          </el-divider>
        </div>
        <div class="contactMsg">
          <div class="options">
            <p>邮箱</p>

          </div>
          <div class="msg">
            <p>{{university.email}}</p>
          </div>
        </div>
      </div>

      <!--    企业-->
      <div class="big" v-else-if="uType=='company'">
        <div class="base">
          <el-divider style="width: 95%;" content-position="left">
            <h3>基本信息</h3>
          </el-divider>
          <el-button
              style="height: 30px;border-radius: 30%"
              size="mini"
          >编辑</el-button>
        </div>
        <div class="baseMsg">
          <div class="options">
            <p>登录名</p>
            <p>企业法人</p>
            <p>企业地址</p>
            <p>注册时间</p>
          </div>
          <div class="msg">
            <p>{{company.companyName}}</p>
            <p>{{company.legalPerson}}</p>
            <p>{{company.address}}</p>
            <p>{{company.registerTime|formatDate}}</p>
          </div>
        </div>
        <div class="contact">
          <el-divider style="width: 95%;" content-position="left">
            <h3>联系信息</h3>
          </el-divider>
        </div>
        <div class="contactMsg">
          <div class="options">
            <p>邮箱</p>
            <p>手机</p>
          </div>
          <div class="msg">
            <p>{{company.email}}</p>
            <p>{{company.tel||'未填写'}}</p>
          </div>
        </div>
      </div>

      <!--    学生-->
      <div class="big" v-else>
        <div class="base">
          <el-divider style="width: 95%;" content-position="left">
            <h3>基本信息</h3>
          </el-divider>
          <el-button
              style="height: 30px;border-radius: 30%"
              size="mini"
          >编辑</el-button>
        </div>
        <div class="baseMsg">
          <div class="options">
            <p>登录名</p>
            <p>学校</p>
            <p>性别</p>
            <p>毕业年份</p>
            <p>地址</p>
          </div>
          <div class="msg">
            <p>{{student.studentName}}</p>
            <p>{{student.uid}}</p>
            <p>{{student.sex}}</p>
            <p>{{student.yearNum}}</p>
            <p>{{student.address}}</p>
          </div>
        </div>
        <div class="contact">
          <el-divider style="width: 95%;" content-position="left">
            <h3>联系信息</h3>
          </el-divider>
        </div>
        <div class="contactMsg">
          <div class="options">
            <p>邮箱</p>
            <p>手机</p>
          </div>
          <div class="msg">
            <p>{{student.email||'暂无'}}</p>
            <p>{{student.tel||'暂无'}}</p>
          </div>
        </div>
      </div>
    </div>
    <div v-else style="width: 70%;height:100px;background-color:#fff;display: flex;justify-content: center;align-items: center;height: 180px">
      <h3>该用户个人信息已隐藏~</h3>
    </div>

  </div>



</template>

<script>
import { getArchives} from "@/api/user";
export default {
  name: "archives",
  data() {
    return {
      uType:'',
      formInline: {
        user: "",
        region: "",
      },
      company:{},
      university:{},
      student:{},
      visible:true
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
        const {uid,type,archivesVisible}=this.$store.getters["user/getOther"]
        this.uType=type
        this.visible=archivesVisible
        getArchives(type,uid,false).then((res) => {
          console.log(res);
          if(type=='university'){
            this.university=res.data.extend.university
            console.log(this.university)
          }else if(type=='student'){
            this.student=res.data.extend.student
          }else {
            this.company=res.data.extend.company
          }
        });
    },
    onSubmit() {
      console.log("submit!");
    },
  },
};
</script>

<style scoped>
.big{
  width: 70%;
  min-height: 500px;
  box-sizing: border-box;
  padding: 2% 10%;
  display: flex;
  align-items: center;
  flex-direction: column;
  background-color: #fff;
  border-bottom: 1px solid grey;
}
.base {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.contact {
  width: 100%;
}
.baseMsg {
  width: 90%;
  height: 120px;
  font-size: 15px;
  color: rgb(128, 128, 128);
  display: flex;
  justify-content: space-between;
}
.contactMsg {
  width: 90%;
  height: 70px;
  font-size: 15px;
  color: rgb(128, 128, 128);
  display: flex;
  justify-content: space-between;
}
.options {
  width: 60px;
  height: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: flex-end;
}
.msg {
  color: black;
  justify-content: space-between;
  width: 85%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
</style>
